UI

Here you will find all the tools for creating, testing, and populating your web interface, as well as adding logic.

Topbar

The topmost element is the topbar. On the left side, you will find options to change the project name(1) (double-clicking on the project name opens an in-place edit), save the current state of your project (2), or save the project under a different name (3).

On the right side, you can adjust breakpoints to test various device resolutions (4), start the preview (5), or launch the project as a web app (6).

The preview generates a new tab displaying the currently saved project in preview mode. The active page is loaded in preview mode.

Many functionalities that have been disabled in the UI designer are functional in preview mode. The preview mode serves as a simple testing environment to test the layout and functionality of a page. The Toolbar at the top of the preview also helps in this regard. Here, you can change the project theme (1), use a different breakpoint (2) or load a different page (3) in preview mode.

Every saved project can be launched live directly through a project URL. To do this, you simply need to utilize the project URL, which always consists of:

https://<domain>/#/<de-DE/en-US>/<database>/<project-name>/login

When entering the project URL, we arrive at a login page where we can test the web app live using a test user.

Lastly, on every topbar, you will find the context help (7) and the account settings (8).

Workarea

Here, we see the active page or popup of our project. Additional pages can be activated through the explorer or selected via the tabbar (1). Below the tabbar, you will find the contentbar (2). Here, you can find the undo and redo buttons (3) for the active page and options for the ruler (4). With the "Hide Rulers" option, you can turn off the rulers, and with the "Hide Frames" option, the component frames will only be displayed for the active or hovered component. This allows you to get a better idea of how your interface will look later on.

The third option allows you to create and display guides. The guides are intended to provide orientation aids for layout design.

Once a page has been activated, we can see all the elements of the page, and the active component is highlighted with a frame containing sizing handlers. Additionally, a context-based Toolbar (1) is displayed, offering various settings for the active component. A copy button (2) is also displayed, allowing you to copy the active component and introduce it into the same container.

Below the displayed page, you will find the Layer View. It always shows the structural path from the main container (yPage/yPopup) to the active component. This allows you to activate components that are not reachable by clicking or better understand the layout structure.